<!--设备台账主组件-->
<template>
  <div class="page-box">
    <el-row class="page-box-item">
      <el-col :span="4" style="padding-right: 5px">
        <el-card shadow="never">
          <el-input v-model="filterText" style="width:150px" placeholder="请输入类型名称"></el-input>
          <el-tree :data="treeData" v-loading="isLoadingTree" :props="defaultProps" @node-click="treeClick"
            :filter-node-method="filterNode" ref="tree"></el-tree>
        </el-card>
      </el-col>
      <el-col :span="20" style="padding-left: 5px">
        <div class="page-search">
          <div>
            <label>设备编码</label>
            <el-input v-model="searchForm.MachineryCode" style="width:160px" placeholder="请输入设备编码"></el-input>
          </div>
          <div>
            <label>设备名称</label>
            <el-input v-model="searchForm.MachineryName" style="width:160px" placeholder="请输入设备名称"></el-input>
          </div>
          <div>
            <label>设备状态</label>
            <el-input v-model="searchForm.Status" style="width:160px" placeholder="请输入设备状态"></el-input>
          </div>

          <div>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="reset">重置</el-button>
          </div>
        </div>
        <div class="page-section">
          <div class="page-tool">
            <el-button type="primary" plain icon="el-icon-plus" @click="add" size="small">新增</el-button>
            <el-button type="danger" plain icon="el-icon-delete" @click="dels" size="small">删除</el-button>
            <el-dropdown class="mg-l">
              <el-button size="small" type="primary" plain>
                <i class="el-icon-s-grid"></i>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="exports"><i class="el-icon-receiving"></i>导出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <!--表单-->
          <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="calc(100vh - 350px)" row-key="Id">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column fixed prop="MachineryCode" label="设备编码" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="MachineryName" label="设备名称" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="MachineryTypeName" label="所属分类" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="WorkshopName" label="所属车间" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="Status" label="设备状态" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="Location" label="位置" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="创建日期" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{ scope.row.CreateTime | formatDateTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="购买日期" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{ scope.row.PurchasingTime | formatDateTime }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="MachinerySpec" label="规格型号" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="Capacity" label="产能" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="Remark" label="备注" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="操作" :show-overflow-tooltip="true" width="90">
              <template slot-scope="scope">
                <el-button type="text" @click="update(scope.row)">编辑</el-button>
                <el-button type="text" @click="del(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
            :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize" :TotalCount="pageDomain.TotalCount" />
        </div>
      </el-col>
    </el-row>
    <!--弹窗-->
    <el-dialog :close-on-click-modal="false" :title="dialogDomain.title" :visible.sync="dialogDomain.dialogVisible"
      width="50%" @close="closeDialog">
      <MachineryInput :model="model" :isUpdate="isUpdate" @callback="callback" v-if="dialogDomain.dialogVisible">
      </MachineryInput>
    </el-dialog>

  </div>
</template>
<script>
import MachineryInput from './components/MachineryInput.vue'
import Pagination from '@/components/Pagination.vue'
export default {
  components: {
    Pagination,
    MachineryInput
  },
  mounted() {
    this.dataBind()
    this.GetMachineryType()

    window.addEventListener('resize', () => {
      if (this.$refs.dataForm)
        this.$refs.dataForm.doLayout();
    })
  },
  destroyed() {
    window.removeEventListener('resize', () => { });
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  data() {
    return {
      filterText: '',
      //搜索字段
      searchForm: {
        MachineryCode: '',
        MachineryName: '',
        Status: '',
        MachineryTypeId: -1
      },
      //对话框对象
      dialogDomain: {
        title: '新增设备',
        dialogVisible: false
      },
      isUpdate: false,
      //数据模型
      model: {
        MachineryCode: '',
        MachineryName: '',

        MachineryBrand: '',
        MachineryTypeName: '',

        MachinerySpec: '',
        WorkshopName: '',

        Status: '',
        Location: '',

        Capacity: '',
        PurchasingTime: '',

        Remark: ''

      },
      pageDomain: {
        PageIndex: 1,
        PageSize: 10,
        TotalCount: 0
      },
      tableData: [],
      isLoading: false,
      isLoadingTree: false,
      //树形数据
      treeData: [],
      defaultProps: {
        children: 'Children',
        label: 'MachineryTypeName'
      }
    }
  },
  methods: {
    //新增按钮
    add() {
      this.dialogDomain.title = "新增设备"
      this.dialogDomain.dialogVisible = true
      this.isUpdate = false
    },
    //编辑按钮
    update(model) {
      this.dialogDomain.title = "编辑设备"
      this.dialogDomain.dialogVisible = true
      this.isUpdate = true
      console.log(model)
      this.model = model
    },
    //批量删除
    dels() {
      if (this.$refs.dataForm.selection.length <= 0) {
        this.showNotify('请选择一项')
        return
      }
      this.$confirm('确认删除选中数据？不可恢复', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          //获取选中的表格数据并筛选id
          var ids = this.$refs.dataForm.selection.map(x => x.Id)
          //拼接参数
          let params = new URLSearchParams()
          params.append('ids', ids.join(','))
          this.$http.delete('/api/Machinery/DelAll', {
            data: params,
            headers: {
              'content-Type': 'application/x-www-form-urlencoded'
            },
            loading: this.$loading()
          })
            .then((res) => {
              this.showNotify('操作成功', 'success')
              this.dataBind()
            })
        })
        .catch(() => { })
    },
    //删除单条
    del(model) {
      this.$confirm('确认删除选中数据？不可恢复', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http.delete('/api/Machinery', {
            data: {
              id: model.Id
            },
            headers: {
              'content-Type': 'application/x-www-form-urlencoded'
            }
          })
            .then((res) => {
              this.showNotify('操作成功', 'success')
              this.dataBind()
            })
        })
        .catch(() => { })
    },
    //对话框关闭事件
    closeDialog() {
      this.model = {
        MachineryCode: '',
        MachineryName: '',

        MachineryBrand: '',
        MachineryTypeName: '',

        MachinerySpec: '',
        WorkshopName: '',

        Status: '',
        Location: '',

        Capacity: '',
        PurchasingTime: '',

        Remark: ''
      }
    },
    //搜索按钮
    search() {
      this.pageDomain.PageIndex = 1
      this.dataBind()
    },
    //重置按钮
    reset() {
      this.searchForm.MachineryCode = ''
      this.searchForm.MachineryName = ''
      this.searchForm.Status = ''
      this.searchForm.MachineryTypeId = -1
    },
    //新增或编辑页面回调
    callback() {
      let actionName = this.isupdate ? '编辑' : '新增'
      this.showNotify(actionName + '设备成功', 'success')
      this.dialogDomain.dialogVisible = false
      this.dataBind()
    },
    //分页方法
    handleSizeChange(val) {
      this.pageDomain.PageIndex = 1;
      this.pageDomain.PageSize = val;
      this.dataBind();
    },
    handleCurrentChange(val) {
      this.pageDomain.PageIndex = val;
      this.dataBind();
    },
    //点击树形数据时
    treeClick(data) {
      this.searchForm.MachineryTypeId = data.Id
      this.dataBind()
      console.log(data);

    },
    //获取数据
    dataBind() {
      this.isLoading = true
      this.$http.get('/api/Machinery',
        {
          params: {
            PageIndex: this.pageDomain.PageIndex,
            PageSize: this.pageDomain.PageSize,
            MachineryTypeName: this.searchForm.MachineryTypeName,
            MachineryCode: this.searchForm.MachineryCode,
            MachineryName: this.searchForm.MachineryName,
            Status: this.searchForm.Status,
            MachineryTypeId: this.searchForm.MachineryTypeId
          }
        })
        .then(res => {
          this.tableData = res.Data
          this.pageDomain.TotalCount = res.Count
          this.isLoading = false
        })
    },
    //获取树形数据
    GetMachineryType() {
      this.isloadingTree = true
      this.$http.get('/api/MachineryType/GetAll', {
        params: {
          MachineryTypeCode: '',
          MachineryTypeName: '',
        }
      })
        .then((res) => {
          this.treeData = res.Data;
          this.isloadingTree = false;
          this.treeData.unshift({ Id: -1, MachineryTypeName: '全部' })
        })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.MachineryTypeName.indexOf(value) !== 1
    },
    //导出
    exports(){
      this.$confirm('即将导出报表，是否继续？','系统提示',{
        confirmButtonText:'导出',
        cancelButtonText:'取消',
        type:'warning'
      }).then(() => {
        this.$http.request({
          method:"GET",
          loading:this.$loading(),
          url:"/api/Machinery/Export",
          responseType:'blob'
        }).then((res) => {
          const blob = new Blob([res])
          const downloadElement = document.createElement('a')
          const href = window.URL.createObjectURL(blob)
          downloadElement.href = href;
          downloadElement.download = '设备台账信息.xls'
          downloadElement.click()
          window.URL.revokeObjectURL(href)
        })
      }).catch((err) => {
        console.log(err)
      })
    }

  }
}
</script>
<style scoped></style>